<!DOCTYPE html>
<html>
<head>
    <title>动态时间文本框</title>
</head>
<body>
    <button onclick="addTimeTextBox()">添加时间文本框</button>
    <div id="container"></div>

    <script>
        function addTimeTextBox() {
            const newInput = document.createElement('input');
            newInput.type = 'text';
            newInput.readOnly = true;  // 设置为只读
            
            // 获取当前时间并格式化
            const now = new Date();
            const timeString = 
                `${now.getHours().toString().padStart(2, '0')}:` +
                `${now.getMinutes().toString().padStart(2, '0')}:` +
                `${now.getSeconds().toString().padStart(2, '0')}`;

            // 设置文本框值和样式
            newInput.value = `当前时间：${timeString}`;
            newInput.style.margin = '10px';
            newInput.style.display = 'block';
            const lineBreak = document.createElement('br');
            const container = document.getElementById('container');
            container.appendChild(newInput);
            container.appendChild(lineBreak);
        }
    </script>
</body>
</html>